import { View } from "@tarojs/components";
import styles from "./index.scss";
import { useFamilyStore } from "@/model";
import { useMemo } from "react";
import Taro from "@tarojs/taro";
import { getUserInfo } from "@/utils/token";
import guoqi from '@/assets/images/guoqi.png';
import fenquguanli from '@/assets/images/fenquguanli.png';
import wuziguanli from '@/assets/images/wuziguanli.png';
import jiatingchengyuan1 from '@/assets/images/jiatingchengyuan1.png';
import yifu from '@/assets/images/yifu.png';
import tuijianqingdan from '@/assets/images/tuijianqingdan.png';

const Index = () => {
  const { family } = useFamilyStore();
  const items = useMemo(() => {
    return [
      { name: "过期列表", url: '/innerPages/expireList/index',icon:guoqi },
      { name: "分区管理", url: '/innerPages/materialZone/index',icon:fenquguanli },
      { name: "物资管理", url: "/innerPages/material/index",icon:wuziguanli },
      { name: "家庭成员", url: '/innerPages/familyMember/index',icon:jiatingchengyuan1 },
      { name: "衣服搭配", url: '/innerPages/clothMatch/index',icon:yifu },
      { name: "推荐清单", url: '/innerPages/recommend/index',icon:tuijianqingdan},
    ];
  }, []);
  return (
    <View className={styles.container}>
      <View className={styles.topWrap}>
        <View className={styles.family}>
          {family?.name}
          <View
            className={styles.changeFamily}
            onClick={() => {
              Taro.navigateTo({
                url: "/innerPages/family/index",
              });
            }}
          >
            切换家庭
          </View>
        </View>
        <View className={styles.username}>
          {getUserInfo().nickname||''}
        </View>
      </View>
      <View className={styles.contentWrap}>
        <View className={styles.list}>
            {items.map((item, index) => {
              return (
                <View
                  key={index}
                  className={styles.item}
                  onClick={() =>
                    Taro.navigateTo({
                      url: item.url,
                    })
                  }
                >
                  <image className={styles.icon} src={item.icon} />
                  {item.name}
                </View>
              );
            })}
          </View>
      </View>
    </View>
  );
};

export default Index;
